<template>
  <view class="order-detail-page">
    <!-- 顶部信息栏（包含门店信息） -->
    <view class="top-bar">
      <view class="top-bar-content">
        <text class="top-bar-title">支付成功，请您前往指定门店消费</text>
        <view class="shop-info">
          <image class="shop-icon" src="/static/车店2.png"></image>
          <view class="shop-text">
            <text class="shop-name">伟业汽车美容厂(人民路店)</text>
            <text class="shop-address">山阳区人民中路32号</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 容器：限制内容最大宽度并居中 -->
    <view class="content-container">
      <!-- 订单详情模块 -->
      <view class="module order-details-module">
        <text class="module-title">订单详情</text>
        <view class="module-content">
          <view class="order-item">
            <text class="item-label">车辆精洗</text>
            <text class="item-value">¥ 199</text>
          </view>
          <view class="order-item">
            <text class="item-label">车辆附加费用</text>
            <text class="item-value">¥ 199</text>
          </view>
        </view>
      </view>

      <!-- 价格信息模块 -->
      <view class="module price-module">
        <view class="module-content">
          <view class="price-item">
            <text class="item-label">原价</text>
            <text class="item-value">¥ 100</text>
          </view>
          <view class="price-item">
            <text class="item-label">优惠</text>
            <text class="item-value discount">-¥ 10</text>
          </view>
          <view class="price-item">
            <text class="item-label">优惠券</text>
            <text class="item-value coupon">-¥ 20</text>
          </view>
        </view>
      </view>

      <!-- 支付金额模块 -->
      <view class="module payment-module">
        <view class="module-content">
          <view class="payment-item">
            <text class="item-label">支付金额</text>
            <text class="item-value payment-amount">¥ 90</text>
          </view>
        </view>
      </view>

      <!-- 订单信息模块 -->
      <view class="module order-info-module">
        <text class="module-title">订单信息</text>
        <view class="module-content">
          <view class="order-info-item">
            <text class="item-label">订单号：</text>
            <text class="item-value">121212112487878</text>
          </view>
          <view class="order-info-item">
            <text class="item-label">下单时间：</text>
            <text class="item-value">2020.01.08 17:40</text>
          </view>
          <view class="order-info-item">
            <text class="item-label">车辆：</text>
            <text class="item-value">奔驰FWE4/豫A98FHJ</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 数据可根据实际需求从接口获取
    };
  }
};
</script>

<style scoped>
.order-detail-page {
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

/* 顶部信息栏 */
.top-bar {
  background-color: #1D6FFF;
  color: #fff;
  padding: 20rpx;
}

.top-bar-content {
  display: flex;
  flex-direction: column;
}

.top-bar-title {
  font-size: 32rpx;
  margin-bottom: 10rpx;
}

/* 门店信息 */
.shop-info {
  margin-top: 20rpx;
  display: flex;
  text-align: left;
  justify-content: center;
  margin-left: -300rpx;
}

.shop-icon {
  width: 50rpx;
  height: 50rpx;
  margin-top: 15rpx;
  margin-right: 20rpx;
}

.shop-text {
  display: flex;
  flex-direction: column;
}

.shop-name {
  font-size: 28rpx;
  font-weight: bold;
}

.shop-address {
  font-size: 24rpx;
  color: #fff;
}

/* 内容容器：限制最大宽度并居中 */
.content-container {
  width: 100%;
  max-width: 690rpx; /* 可调整宽度 */
  margin: 20rpx auto;
  padding: 0 15rpx;
  box-sizing: border-box;
}

/* 通用模块样式 */
.module {
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.module-title {
  font-size: 32rpx;
  font-weight: bold;
  padding: 20rpx;
  border-bottom: 1px solid #f5f5f5;
}

.module-content {
  padding: 20rpx;
}

/* 订单详情模块 */
.order-details-module .order-item {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

/* 价格信息模块 */
.price-module .price-item {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

/* 支付金额模块 */
.payment-module .payment-item {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0;
}

/* 订单信息模块 */
.order-info-module .order-info-item {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

/* 文本样式 */
.item-label {
  font-size: 28rpx;
  color: #333;
}

.item-value {
  font-size: 28rpx;
  color: #666;
}

.discount, .coupon {
  color: #ff0000;
}

.payment-amount {
  color: #1aad19;
  font-weight: bold;
}
</style>